<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>EX-admin 数据列表页面</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="./css/font.css">
	<link rel="stylesheet" href="./css/xadmin.css">

</head>

<body>

<div class="x-body" id="app">
	<div class="layui-row">
		<form class="layui-form layui-col-md12 x-so">
			<input class="layui-input" placeholder="开始日" name="start" id="start">
			<input class="layui-input" placeholder="截止日" name="end" id="end">
			<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
			<button class="layui-btn" lay-submit="" lay-filter="sreach">
				<i class="layui-icon">&#xe615;</i>
			</button>
		</form>
	</div>
	
	<div class="nav-bar">
		<button class="layui-btn layui-btn-danger" v-on:click="batchRemove">
			<i class="layui-icon"></i>批量删除</button>
		<button class="layui-btn" onclick="x_admin_open('添加用户','./data-add.html',800,500)">
			<i class="layui-icon"></i>添加</button>
		<span class="x-right" style="line-height:40px">共有数据：{{ count }}
				条</span>
	</div>
	
	<div class="layui-form">
		<table class="layui-table">
			<thead>
			<tr>
				<th width="16">
					<input type="checkbox" lay-filter="select-all" title="" lay-skin="primary">
				</th>
				<th>ID</th>
				<th>登录名</th>
				<th>手机</th>
				<th>邮箱</th>
				<th>角色</th>
				<th>加入时间</th>
				<th>状态</th>
				<th>操作</th>
			</thead>
			<tbody>
			<tr v-for="item in items">
				<td>
					<input type="checkbox" v-on="" name="id" title="" lay-skin="primary">
				</td>
				<td>{{ item.id }}</td>
				<td>{{ item.username }}</td>
				<td>{{ item.mobile }}</td>
				<td>{{ item.email }}</td>
				<td>{{ item.role }}</td>
				<td>{{ item.addtime }}</td>
				<td class="td-status">
								<span v-if="item.status" v-on:click="changeMemberStatus(item)"
								      class="layui-btn layui-btn-sm layui-btn-normal">已启用</span>
					<span v-else="v-else" v-on:click="changeMemberStatus(item)" class="layui-btn layui-btn-sm layui-btn-primary">已停用</span>
				</td>
				
				<td class="td-manage">
					<button class="layui-btn layui-btn-default layui-btn-sm" onclick="x_admin_open('修改密码','data-edit.html',800,500)">
						<i class="icon iconfont">&#xe69e;</i>
						编辑</button>
					
					<button class="layui-btn layui-btn-danger layui-btn-sm" v-on:click="removeMember(item)">
						<i class="icon iconfont">&#xe69d;</i>
						删除</button>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
	
	<div v-if="items.length==0" class="text-center layui-bg-gray no-records">对不起，暂无记录.</div>
	
	<!-- 分页组件 -->
	<div id="pagination" class="layui-box"></div>

</div>

<script type="text/javascript" src="./lib/jquery.min.js "></script>
<script type="text/javascript" src="./lib/layui/layui.js"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./lib/vue/vue.js"></script>
<script type="text/javascript" src="./lib/vue/axios.min.js"></script>
<script>
	//全局数据
	var G = {};

	layui.use('laydate', function () {
		var laydate = layui.laydate;

		//执行一个laydate实例
		laydate.render({
			elem: '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem: '#end' //指定元素
		});
	});

	// 初始化 Vue 组件
	var APP = new Vue({
		el: '#app',
		// 数据
		data: {
			items: [],
			count: 500
		},

		// 方法
		methods: {
			//禁用会员
			changeMemberStatus: function (item) {
				item.status = !item.status;
			},

			//删除一行数据
			removeMember: function (item) {

				var that = this;
				layer.confirm('确认要删除吗？', function () {

					//发异步删除数据
					httpGet("./data/del-data.json", function (result) {

						layer.msg('删除成功!', {
							icon: 1,
							time: 1000
						});

						// render the data table
						render();

					}, function (message) {
						layer.msg('删除失败!' + message, {
							icon: 2,
							time: 1000
						});
					})
				});

			},

			//批量删除
			batchRemove: function () {

				var that = this;
				layer.confirm('确认要删除吗？', function (index) {

					// 检查选项
					var selectItemsNum = $('input[name="id"]:checked').length;
					if (selectItemsNum <= 0) {
						layer.alert("请至少选中一条数据.", {icon: 0});
						return;
					}

					// 发异步删除数据
					httpGet("./data/del-data.json", function (result) {

						layer.msg('删除成功!', {
							icon: 1,
							time: 1000
						});

						// render the data table
						render();

					}, function (message) {
						layer.msg('删除失败!' + message, {
							icon: 2,
							time: 1000
						});
					})

				});

			}, //end of batchRemove
		}
	}); //end Vue

	/*渲染列表组件*/
	function render() {

		httpGet(getDataUrl(), function (result) {

			APP.$data.items = result.data;
			APP.$data.count = result.count;

			layui.use('laypage', function () {
				var laypage = layui.laypage;

				//执行一个laypage实例
				laypage.render({
					elem: 'pagination', //分页container ID，不用加 # 号
					limit: result.pagesize, //页面显示记录条数
					count: result.count, //数据总数，从服务端得到
					jump: function (obj, first) {

						//首次不执行
						if (first) {
							//do something
							return;
						}

						// update page and pagesize
						G.page = obj.curr;
						G.pagesize = obj.limit;

						httpGet(getDataUrl(), function (result) {
							APP.$data.items = result.data;
							APP.$data.count = result.count;
						});
					}

				});

			});
		});

	}

	// 获取当前页面的数据页面 URL
	function getDataUrl() {

		var url = "./data/data-list.json";
		var page = G.page || 1,
			pagesize = G.page || 12;
		var params = {
			page: page,
			pagesize: pagesize
		}
		return buildQueryUrl(url, params);
	}

	//loading data from backend
	render();
</script>

</body>

</html>